/**
 * Created by zzy on 2017/8/29.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    Dimensions,
    PixelRatio,
    TextInput
} from 'react-native';
import Modal from 'react-native-modalbox';
import {observer} from 'mobx-react/native'
import {observable, action, computed, observe} from 'mobx'
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
@observer
export default class InvoiceModal extends Component{

    @observable invoiceTypePoi=0;
    @observable invoiceTypeTitle=0;
    constructor(props){
        super(props);
        this.invoiceType=[{type:'纸质发票'},{type:'电子发票'}];
        this.onTitleSelect = this.onTitleSelect.bind(this);
        this.onContentSelect = this.onContentSelect.bind(this);
        this.callbcak=this.props.callbcak;
    }
    render(){
        return <Modal
            position="bottom"
            ref={"invoiceModal"}
            backButtonClose={true}
            style={{
               backgroundColor:'white',
               height:370
           }}
               >
            <View style={[{flexDirection:'row',justifyContent:'space-between',padding:10},invoiceModalStyle.borderLine]}>
                <Text onPress={this.closeModal.bind(this)}>取消</Text>
                <Text>发票信息</Text>
                <Text onPress={this.ensure.bind(this)}>确定</Text>
            </View>
            <View style={[{padding:10},invoiceModalStyle.borderLine]}>
                <Text style={{color:'black'}}>发票类型</Text>
                <View style={{flexDirection:'row',marginTop:10}}>
                    {
                        this.invoiceType.map((type,index)=>{
                            let invoiceTypeColor=this.invoiceTypePoi==index?'#4dc0ff':'gray';
                            return <View key={index} style={{borderWidth: 3 / PixelRatio.get(),borderRadius:3,borderColor:invoiceTypeColor,padding:3,marginRight:10}}>
                                <Text style={{color:invoiceTypeColor}} onPress={()=>{
                                    this.invoiceTypePoi=index
                                }}>{type.type}</Text>
                            </View>
                        })
                    }
                </View>
            </View>
            <View style={[{padding:10},invoiceModalStyle.borderLine]}>

                <Text style={{color:'black'}}>发票抬头</Text>

                    <RadioGroup
                        style={{flexDirection:'row'}}
                        selectedIndex={this.invoiceTypeTitle}
                        onSelect = {(index, value) => this.onTitleSelect(index, value)}
                    >
                        <RadioButton value={'item1'} >
                            <Text>个人</Text>
                        </RadioButton>

                        <RadioButton value={'item2'}>
                            <Text>单位</Text>
                        </RadioButton>

                    </RadioGroup>

                {
                    this.invoiceTypeTitle==0?(null):<View>

                        <TextInput
                            style={{height: 40,backgroundColor:'#f2f2f2',marginHorizontal:20}}
                            placeholder='填写单位名称'
                            underlineColorAndroid='transparent'
                        />
                        <TextInput
                            style={{height: 40,backgroundColor:'#f2f2f2',marginHorizontal:20,marginTop:10}}
                            placeholder='填写纳税人识别号'
                            underlineColorAndroid='transparent'
                        />

                    </View>
                }
            </View>

            <View style={[{padding:10},invoiceModalStyle.borderLine]}>

                <Text style={{color:'black'}}>发票内容</Text>
                <RadioGroup
                    style={{flexDirection:'row'}}
                    selectedIndex={0}
                    onSelect = {(index, value) => this.onContentSelect(index, value)}
                >
                    <RadioButton value={'item1'} >
                        <Text>明细</Text>
                    </RadioButton>

                    <RadioButton value={'item2'}>
                        <Text>不开发票</Text>
                    </RadioButton>

                </RadioGroup>
            </View>
        </Modal>
    }
    onTitleSelect(index, value){
        this.invoiceTypeTitle=index
    }
    onContentSelect(index, value){

    }
    openModal(){
        this.refs.invoiceModal.open();
    }
    closeModal(){
        this.refs.invoiceModal.close();
    }
    ensure(){
        this.closeModal();
        this.props.callbcak();
    }
}

const invoiceModalStyle={
    borderLine:{
        borderBottomColor: '#f5f5f5',
        borderBottomWidth: 5 / PixelRatio.get()
    }
};
